<html>
	<head>
		<title>自动播放幻灯片</title>
		<meta charset='Utf-8'>

	<style type="text/css">
	body {
		background: #000;

	}
	#content {
		background: #000;
	}

	#slider {
		background-color: #fff;
		width:492px;
		height:172px;
		padding: 9px;
		border-radius: 5px;
		margin:30px auto 30px;
		position: relative;
	}

	#slider li {
		position: absolute;
	}

	#slider img {
		width: 490px;
		height: 170px;
		/*opacity: 0;*/
	}

	#count {
		color:#fff;
	}
	</style>
	</head>
	<body>
		<div id="content">
			<ul id="slider">
				<li><img src="http://js.fgm.cc/learn/lesson4/img/01.jpg" alt=""></li>
				<li><img src="http://js.fgm.cc/learn/lesson4/img/02.jpg" alt=""></li>
				<li><img src="http://js.fgm.cc/learn/lesson4/img/03.jpg" alt=""></li>
				<li><img src="http://js.fgm.cc/learn/lesson4/img/04.jpg" alt=""></li>
				<li><img src="http://js.fgm.cc/learn/lesson4/img/05.jpg" alt=""></li>
			</ul>

			<ul id="count">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<button>变</button>
			</ul>
		</div>

		<script>
			var aUl = document.getElementsByTagName("ul");
			var aImg = aUl[0].getElementsByTagName("li");
			var aNum = aUl[1].getElementsByTagName("li");
			var index=0;
			var alpha=0;

			window.onload=function() {
				// var oBox = document.getElementById("box");				
			
				hideAll();
				autoPlay();
			}

			function autoPlay() {
				var play = setInterval(function () {
					if(index===4)
						index==0;
					else
						index++;
					
					console.log(index);
					show(index);		
				},2000);
			}

			function hideAll() {
					for(var i = 0; i<aImg.length;i++) {
						changeStyle(aImg[i],'opacity','0');
					}
				}		

			function changeStyle(elem,attr,value) {
				elem.style[attr] = value;
			}

			document.getElementsByTagName('button')[0].onclick=function() {
				// changeStyle(aImg[3],'opacity','1');	
				var a = setInterval('alterPage(3)',20)
			}

	

			function show(a) {
				index = a;
				var alpha = 0;
				clearInterval(timer);

				hideAll();
				var timer = setInterval(function(){
					alpha += 0.02;
					alpha > 1 && (alpha =1);
					aImg[index].style.opacity = alpha;

				},20);
			
			
			}
	

		</script>
	</body>


</html>